<template>
  <div class="accessory">
    <c-section v-if="(formData.range||[]).includes('STORES')" title="卖场照片">
      <!-- <c-section v-if="(formData.decorationRange||[]).includes('STORES')" title="卖场照片"> -->
      <div class="srores">
        <div>
          <div class="title">外观照片</div>
          <c-file-list v-model="files.appearance" :model-id="modelId" view-type="image" type-code="ACCESS012" />
        </div>
        <div>
          <div class="title">顶面照片</div>
          <c-file-list v-model="files.top" :model-id="modelId" view-type="image" type-code="ACCESS013" />
        </div>
        <div>
          <div class="title">地面照片</div>
          <c-file-list v-model="files.floor" :model-id="modelId" view-type="image" type-code="ACCESS014" />
        </div>
        <div>
          <div class="title">墙面照片</div>
          <c-file-list v-model="files.wall" :model-id="modelId" view-type="image" type-code="ACCESS015" />
        </div>
        <div>
          <div class="title">整体照片</div>
          <c-file-list v-model="files.overall" :model-id="modelId" view-type="image" type-code="ACCESS016" />
        </div>
      </div>
    </c-section>
    <c-section title="装修申请附件">
      <c-file-list v-model="files.apply" :model-id="modelId" view-type="image" type-code="ACCESS017" />
    </c-section>
    <c-section v-if="showEarnest" title="自装承诺书附件">
      <c-file-list v-model="files.promiseFile" belong-model="SHOP_DECORATION" attachment-type="自装承诺书" :model-id="modelId" view-type="image" type-code="ACCESS140" />
    </c-section>
    <div class="btn-container">
      <c-button type="primary" @click="clickPrevStep">上一步</c-button>
      <c-button type="primary" @click="clickSaveHandle">保存</c-button>
      <c-button type="primary" @click="clickSubmitHandle">提交</c-button>
    </div>
  </div>
</template>
<script>
import { postCommitPro } from '@/api/decorate'
export default {
  name: 'DecorateAccessory',
  components: {
  },
  props: {
    formData: {
      type: Object,
      default: () => ({
        designPictureDTOS: [],
        files: [],
        decorationRange: []
      }),
      required: true
    }
  },
  data() {
    return {
      // 已上传附件
      files: {
        appearance: [],
        top: [],
        floor: [],
        wall: [],
        overall: [],
        apply: [],
        promiseFile: []
      },
      // visibleObj: {},
      // 自装需要校验
      applyImgs: []
    }
  },
  computed: {
    // 附件
    modelId() {
      return this.$route.query.id
    },
    showEarnest() {
      return this.formData.range && this.formData.nature === 'PRIVATES'
    }
  },
  created() {
  },
  methods: {
    clickPrevStep() {
      this.$emit('prev', 1)
    },
    // 处理数据
    handlerData() {
      // 装修申请、装修执行菜单下所有页签附件需控制必传
      if ((this.formData.range || []).includes('STORES')) {
        for (const item of this.$split('appearance:外观照片 top:顶面照片 floor:地面照片 wall:墙面照片 overall:整体照片', ' ')) { //  apply:装修申请 装修申请附件不控制必填
          const [k, v] = this.$split(item, ':')
          const _files = this.$getFiles(this.files[k], this.formData.id)
          if (_files.filter(e => e.dr !== 1 && e.dr !== '1').length === 0) {
            this.$message.warning(`至少上传一个${v}附件！`)
            return
          }
        }
      }
      const s = this.$getFiles(this.files.apply || [], this.formData.id).filter(e => e.dr !== 1 && e.dr !== '1').length === 0
      if (this.formData.nature === 'PRIVATES' && s) {
        this.$message.warning('自装必须上传装修申请附件！')
        return
      }
      const pf = this.$getFiles(this.files.promiseFile || [], this.formData.id).filter(e => e.dr !== 1 && e.dr !== '1').length === 0
      if ((this.formData.range || []).includes('STORES') && this.formData.nature === 'PRIVATES' && pf) {
        this.$message.warning('请上传自装承诺书附件！')
        return
      }
      const files = []
      for (const item of Object.values(this.files)) {
        files.push(...item)
      }
      return {
        id: this.formData.id,
        files: this.$getFiles(files, this.formData.id)
      }
    },
    clickSaveHandle() {
      const data = this.handlerData()
      if (!data) return
      return postCommitPro(data).then(res => {
        this.$message.success('操作成功！')
        this.$store.dispatch('views/goFirst')
      })
    },
    clickSubmitHandle() {
      const data = this.handlerData()
      if (!data) return
      return this.$msgbox({
        title: '提交',
        message: '将触发BPM进行装修申请审批，是否确认？确认后触发bpm装修申请流程',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        data.commitType = 'commit'
        data.businessStatus = this.formData.businessStatus
        return postCommitPro(data).then(res => {
          this.$message.success('装修申请流程\n提交成功！')
          this.$store.dispatch('views/goFirst')
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.accessory{
  .srores{
    padding: 0 10px;
    .title{
      font-size: 16px;
      color: #333;
      font-weight: 600;
      padding-bottom: 10px;
    }
  }
}
</style>
